<template>
	<view>
		<uni-nav-bar fixed left-icon="back" title="租赁押金" @right="navTo('/pagesA/coupons/leaseList')" rightText="记录"></uni-nav-bar>

		<view v-if="!billQRCode">
			<view class="ui-row-money">
				<view>押金金额</view>
				<view class="tui-flex">
					<text style="width: 10%">￥</text>
					<input class="input" type="number" focus auto-blur v-model="totalAmout" placeholder-class="placeholder"/>
				</view>
			</view>

			<view class="ui-btn">
				<button class="btn"
				        type="primary"
				        :style="{background: `${!totalAmout? 'rgb(140,206,99)': '#6CB041'}`} "
				        @tap="fareGo()">
					确定
				</button>
			</view>
		</view>

		<!--收款码-->
		<view v-else class="container page">
			<view class="panel">
				<view class="header">请扫描以下收款码</view>
				<view class="qrcode">
					<view v-if="codes == 0" class="flex-img">
						<text class="text">已完成支付</text>
					</view>
					<img :src="billQRCode" alt="" class="img">
				</view>
			</view>
			<view class="ui-btn" style="width: 95%">
				<button class="btn"
				        v-if="codes == 0"
				        type="primary"
				        style="background: #fff;color: #6CB041"
				        @tap="navTo('/pagesA/coupons/loan?loginWay=0&billNo=' + billNo)">
					去填写订单
				</button>
				<button class="btn"
				        v-else
				        type="primary"
				        style="background: #fff;color: #6CB041"
				        @tap="getQuery()">
					检查是否完成支付
				</button>
			</view>
		</view>
		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>
<script>
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'

    export default {
        components: {
            uniLoginModel
        },
        data() {
            return {
                totalAmout: null,
                billQRCode: '',
                billNo: '',
                codes: undefined
            }
        },
        onLoad() {
        },
        methods: {
            fareGo() {
                if (this.totalAmout == 0 || this.totalAmout == null) {
                    uni.navigateTo({
                        url: '/pagesA/coupons/loan?loginWay=0&billNo=' + this.billNo
                    })
                    return
                }
                uni.showLoading({title: ''})
	            this.$api.api('lease.code', {totalAmout: this.totalAmout}).then(res => {
		            if (res.code == 200) {
                        uni.hideLoading();
			            this.billQRCode = res.data.billQRCode
			            this.billNo = res.data.billNo
		            } else {
                        uni.hideLoading();
			            uni.showToast({title: res.message, icon: 'none'})
		            }
	            })
            },
            getQuery() {
                uni.showLoading({title: ''})
                this.$api.api('lease.pay', {billNo: '30FG202106251119171332144370'}).then(res => {
                    if (res.code == 200) {
                        this.codes = res.data.code
                        uni.hideLoading();
                        if (this.codes == 0) {
                            uni.navigateTo({
                                url: '/pagesA/coupons/loan?loginWay=0&billNo=' + this.billNo
                            })
                        }
                    } else {
                        uni.hideLoading();
                        uni.showToast({title: res.message, icon: 'none'})
                    }
                })
            },
            navTo(url) {
                uni.navigateTo({
                    url: url
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
	.ui-row-money{
		margin: 60rpx 30rpx;
		background: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;
		font-size: 32rpx;
		.tui-flex {
			padding-top: 30rpx;
			font-size: 50rpx;
			.placeholder {
				font-size: 50rpx;
				padding-left: 15rpx;
			}
			.input{
				height: 80rpx;
				flex: 1;
				font-size: 60rpx;
			}
		}
	}
	.ui-btn {
		margin: 30rpx;
		.btn {
			background: #6CB041;
			color: #fff;
		}
	}
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 94.5vh;
		overflow: hidden;
		background-color: #6CB041;
		.header {
			height: 140rpx;
			background-color: #f0f0f0;
			border-radius: 10rpx 10rpx 0 0;
			text-align: center;
			line-height: 140rpx;
			font-weight: bold;
			letter-spacing: 2px;
			margin-bottom: 40rpx;
			font-size: 34rpx;
			color: #6CB041;
		}
		.panel {
			width: 95%;
			border-radius: 10rpx;
			background-color: #fff;
			padding-bottom: 20rpx;
			.qrcode {
				text-align: center;
				position: relative;
				.flex-img {
					background: rgba(0,0,0,.5);
					position: absolute;
					width: 580rpx;
					height: 98%;
					left: 0;
					right: 0;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #6cb041;
					.text {
						padding: 6rpx 20rpx;
						background: rgb(255, 255, 255);
						border-radius: 14rpx;
					}
				}
				.img {
					width: 580rpx;
				}
			}
		}
	}
</style>